<template>
  <a-form :model="form"
          ref="ruleForm"
          v-bind="layout">
    <a-form-item label="计划日期"
                 v-bind="validateInfos.date"
                 ref="date">
      <a-date-picker valueFormat="YYYY-MM-DD HH:MM:ss"
                     v-model:value="form.date"
                     show-time
                     type="date"
                     placeholder="请选择计划日期"
                     style="width: 100%;" />
    </a-form-item>
    <a-form-item label="耗时"
                 v-bind="validateInfos.time"
                 required>
      <a-input-number v-model:value="form.time"
                      :min="1"
                      :max="10"
                      placeholder="请选择耗时"
                      style="width: 100%;"></a-input-number>
    </a-form-item>
    <a-form-item label="备注"
                 v-bind="validateInfos.content"
                 required>
      <a-textarea v-model:value="form.content"
                  placeholder="请输入备注"
                  :rows="4"
                  style="width: 100%;" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary"
                @click="onSubmit">
        创建任务
      </a-button>
      <a-button @click="onCreal"
                style="margin-left: 10px;">
        重置
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
  import { reactive, toRefs, ref, toRaw } from 'vue'
  import { useForm } from '@ant-design-vue/use';
  import moment from 'moment'
  import { rulesAddTimeFrom } from './config'
  export default {
    setup (props, context) {
      const state = reactive({
        form: {
          date: moment(Date.now()).format('YYYY-MM-DD HH:MM:ss'),
          time: 1,
          content: ''
        },
        layout: {
          labelCol: {
            span: 4
          },
          wrapperCol: {
            span: 14
          }
        }
      })
      const { resetFields, validate, validateInfos } = useForm(state.form, reactive(rulesAddTimeFrom));
      const onSubmit = (e) => {
        e.preventDefault();
        validate().then(res => {
          const params = toRaw(state.form)
          context.emit('handlePlan', params)
          onCreal()
        })
      }
      const onCreal = () => {
        resetFields();
      }
      return {
        ...toRefs(state),
        onSubmit,
        onCreal,
        validateInfos,
      }
    }
  };
</script>
